<template>
	<div>
		<!-- 搜索框 -->
		<van-search shape="round" placeholder="请输入搜索关键词" v-model.trim="keywords" />
		<!-- 搜索下容器 -->
		<div class="search_wrap" v-if="songList.length === 0 && keywords === ''">
			<!-- 标题 -->
			<van-divider content-position="left">热门搜索</van-divider>
			<!-- 热搜关键词容器 -->
			<div class="hot_name_wrap">
				<!-- 每个搜索关键词 -->
				<span
					class="hot_item"
					:class="{ hot_item_current: keywords === item.first }"
					v-for="item in hotSearchList"
					:key="item.first"
					@click="keywords = item.first"
				>
					{{ item.first }}
				</span>
			</div>
		</div>

		<!-- 无匹配项 -->
		<div v-else-if="songList.length === 0 && keywords !== ''">
			<van-empty image="search" description="搜索结果" />
		</div>

		<!-- 搜索结果 -->
		<!-- 触底加载 -->
		<div class="search_wrap" v-else>
			<van-list
				v-model="loading"
				:finished="finished"
				finished-text="最多加载40条"
				@load="onLoad"
			>
				<van-divider content-position="left">最佳匹配</van-divider>
				<van-cell-group inset :border="false">
					<!-- <van-cell 
						:title="item.name" 
						center 
						:border="true" 
						:label="item.ar[0].name + ' - ' + item.name" 
						v-for="item in songList" 
						:key="item.id"
					>
						<template #right-icon>
							<van-icon name="play-circle-o" size="0.6rem" />
						</template>
					</van-cell> -->
					<SongItem
						v-for="item in songList"
						:key="item.id"
						:name="item.name"
						:author="item.ar[0].name"
						:id="item.id"
					></SongItem>
				</van-cell-group>
			</van-list>
		</div>
	</div>
</template>

<script>
import { hotSearchAPI, searchAPI } from '@/api/index';
import SongItem from '@/components/SongItem.vue';
export default {
	async created() {
		// hotSearchAPI().then(res => this.hotSearchList = res.data.result.hots);
		this.hotSearchList = (await hotSearchAPI()).data.result.hots;
	},

	data() {
		return {
			// 热搜词
			hotSearchList: [],
			// 输入框值
			keywords: '',
			// 搜索结果
			songList: [],
			// van-list
			loading: false,
			finished: false,
			// 页码
			page: 1,
			// 搜索防抖
			timeid: null
		};
	},

	watch: {
		keywords() {
			// let timeid = null;
			if (this.timeid) clearTimeout(this.timeid);
			// 空值判断
			if (this.keywords === '') {
				this.songList = [];
				return;
			}
			this.timeid = setTimeout(() => {
				// 首次匹配
				this.getSongs(res => (this.songList = res));
			}, 1500);
			// 重置触底状态
			this.finished = false;
			this.page = 1;
		}
	},

	methods: {
		async getSongs(fn) {
			// 调用搜索API
			/* searchAPI({ keywords: this.keywords, limit: 15, offset: (this.page - 1) * 15 }).then(
				res => {
					// 无匹配项
					// 针对首次匹配，重复匹配在此接口下不会返回空数据
					if (!res.data.result.songs) {
						console.log('无匹配结果');
						this.songList = [];
						return;
					}
					console.log(res.data.result.songs);
					if (fn) fn(res.data.result.songs);
				}
			); */
			const res = (await searchAPI({
				keywords: this.keywords,
				limit: 15,
				offset: (this.page - 1) * 15
			})).data.result.songs;
			if (!res) {
				console.log('无匹配结果');
				this.songList = [];
				return;
			}
			if (fn) fn(res);
		},

		onLoad() {
			// 触底，加载更多
			console.log('触底，加载更多');
			// 异步更新数据
			// setTimeout 仅做示例，真实场景中一般为 ajax 请求
			setTimeout(() => {
				this.page++;
				this.getSongs(res => {
					this.songList.push(...res);
					// 加载状态结束
					this.loading = false;

					// 数据全部加载完成
					if (this.songList.length >= 40) this.finished = true;
				});
			}, 1000);
		}
	},

	components: {
		SongItem
	}
};
</script>

<style>
/* 搜索容器的样式 */
.search_wrap {
	padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
	font-size: 0.32rem;
	color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
	margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
	display: inline-block;
	height: 0.853333rem;
	margin-right: 0.213333rem;
	margin-bottom: 0.213333rem;
	padding: 0 0.373333rem;
	font-size: 0.373333rem;
	line-height: 0.853333rem;
	color: #333;
	border-color: #d3d4da;
	border-radius: 0.853333rem;
	border: 1px solid #d3d4da;
}

.hot_item_current {
	border-color: #04cc80;
	color: #04cc80;
}
</style>
